import React, { useEffect, useState, useRef } from 'react'
import styles from './index.module.scss'
import NavBar from '@/components/NavBar'
// 导入antd-mobile的组件
import { List, DatePicker, Drawer, Toast, Modal } from 'antd-mobile'
import { useDispatch } from 'react-redux'
import { getProfile, UpdatePhoto, UpdateProfile } from '@/store/actions/profile'
import { useSelector } from 'react-redux'
import classNames from 'classnames'
// 编辑输入框组件
import EditInput from './components/EditInput'
import EditList from './components/EditList'
import dayjs from 'dayjs'
import { logout } from '@/store/actions/login'
import { useHistory } from 'react-router-dom'

const { Item } = List
const alert = Modal.alert
export default function ProfileEdit() {
  const dispatch = useDispatch()
  const history = useHistory()
  const fileRef = useRef(null)
  // 昵称和简介的抽屉状态设置  默认是关闭的
  const [open, setOpen] = useState({
    visible: false,
    type: '',
  })
  // 性别和头像的 抽屉状态设置
  const [openList, setOpenList] = useState({
    visible: false,
    type: '',
  })
  // 头像和性别的配置文件
  const config = {
    photo: [
      {
        title: '拍照',
        onClick: () => {
          console.log('拍照')
        },
      },
      {
        title: '本地选择',
        onClick: () => {
          console.log('本地选择')
          fileRef.current.click()
        },
      },
    ],
    gender: [
      {
        title: '男',
        onClick: () => {
          console.log('男')
          onCommit('gender', 0)
        },
      },
      {
        title: '女',
        onClick: () => {
          console.log('女')
          onCommit('gender', 1)
        },
      },
    ],
  }
  // 点击后关闭抽屉
  const onClose = () => {
    setOpen({
      visible: false,
      type: '',
    })
    // 关闭 性别和头像 抽屉
    setOpenList({
      visible: false,
      type: '',
    })
  }
  useEffect(() => {
    dispatch(getProfile())
  }, [dispatch])
  // 提交事件
  const onCommit = async (type, value) => {
    console.log(type, value)
    // 发送请求
    await dispatch(
      UpdateProfile({
        [type]: value,
      })
    )
    // 关闭抽屉
    onClose()
    // 提醒用户
    Toast.success('修改成功', 1)
  }
  // 头像上传的处理函数
  const onFileChange = async (e) => {
    const file = e.target.files[0]
    console.log(file)
    // 新建一个formData
    const fd = new FormData()
    // 把文件上传到服务器
    fd.append('photo', file)
    await dispatch(UpdatePhoto(fd))
    // 关闭抽屉
    onClose()
    // 提醒用户
    Toast.success('修改成功', 1)
  }
  // 生日修改
  const onBirthdayChange = (e) => {
    onCommit('birthday', dayjs(e).format('YYYY-MM-DD'))
  }
  // 退出登录
  const logoutFn = () => {
    // 1-弹窗提醒确认
    // 2-移除本地和redux中的token
    // 3-跳转到登录页
    alert('退出', '确定退出吗?', [
      {
        text: '取消',
        style: 'default',
      },
      {
        text: '确定',
        onPress: () => {
          // 移除token
          dispatch(logout())
          // 页面跳转
          history.replace('/login')
          // 弹窗提醒
          Toast.success('退出登录成功', 1)
        },
      },
    ])
  }
  // 获取redux中的profile数据
  const profile = useSelector((state) => state.profile.profile)
  // console.log(profile)
  return (
    <div className={styles.root}>
      {/* 这个盒子主要用来解决 抽屉组件定位压住内容盒子的问题 
      层级更高
      */}
      <div className="content">
        {/* 顶部的导航栏 */}
        <NavBar>个人信息</NavBar>

        <div className="wrapper">
          {/* 第一个列表 */}
          <List className="profile-list">
            {/* 头像 */}
            <Item
              arrow="horizontal"
              onClick={() => {
                setOpenList({
                  visible: true,
                  type: 'photo',
                })
              }}
              extra={
                <span className="avatar-wrapper">
                  <img src={profile.photo} alt="" />
                </span>
              }
            >
              头像
            </Item>
            {/* 昵称 */}
            <Item
              arrow="horizontal"
              extra={profile.name}
              onClick={() => {
                setOpen({
                  visible: true,
                  type: 'name',
                })
              }}
            >
              昵称
            </Item>
            {/* 简介 */}
            <Item
              arrow="horizontal"
              extra={
                <span
                  className={classNames('intro', profile.intro ? 'normal' : '')}
                >
                  {profile.intro || '未填写'}
                </span>
              }
              onClick={() => {
                setOpen({
                  visible: true,
                  type: 'intro',
                })
              }}
            >
              简介
            </Item>
          </List>
          {/* 第二个列表 */}
          <List className="profile-list">
            {/* 性别 */}
            <Item
              extra={profile.gender === 0 ? '男' : '女'}
              arrow="horizontal"
              onClick={() => {
                setOpenList({
                  visible: true,
                  type: 'gender',
                })
              }}
            >
              性别
            </Item>
            {/* 选择生日 */}
            <DatePicker
              mode="date"
              value={new Date(profile.birthday)}
              minDate={new Date('1900-01-01')}
              maxDate={new Date()}
              title="选择生日"
              onChange={onBirthdayChange}
            >
              <Item arrow="horizontal" extra={'2020-02-02'}>
                生日
              </Item>
            </DatePicker>
          </List>
        </div>
        {/* 底部栏：退出登录按钮 */}
        <div className="logout">
          <button className="btn" onClick={logoutFn}>
            退出登录
          </button>
        </div>
      </div>
      {/* 全屏表单抽屉 */}
      {/* position 抽屉所在位置 open 开关状态 默认关闭 sidebar 	抽屉里的内容 */}
      <Drawer
        position="right"
        className="drawer"
        sidebar={
          // 当抽屉为打开状态的时候 才渲染组件
          // 当抽屉组件关闭的时候 组件会销毁
          open.visible && (
            <EditInput
              onClose={onClose}
              type={open.type}
              onCommit={onCommit}
            ></EditInput>
          )
        }
        // 抽屉组件必须要children属性 否则会报错
        children={''}
        // open 开关状态 默认关闭 点击后打开
        open={open.visible}
      />
      <input type="file" hidden ref={fileRef} onChange={onFileChange} />
      {/* 底部半屏抽屉  头像和性别 */}
      <Drawer
        position="bottom"
        className="drawer-list"
        sidebar={
          // 当抽屉为打开状态的时候 才渲染组件
          // 当抽屉组件关闭的时候 组件会销毁
          openList.visible && (
            <EditList
              config={config}
              type={openList.type}
              onClose={onClose}
            ></EditList>
          )
        }
        // 抽屉组件必须要children属性 否则会报错
        children={''}
        // open 开关状态 默认关闭 点击后打开
        open={openList.visible}
        onOpenChange={onClose}
      />
    </div>
  )
}
